import React from "react";
import { Image, PixelRatio, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
const size = 50;
const cat = {
    uri: "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
    width: size,
    height: size
};
const App = () => (
    <ScrollView style={styles.scrollContainer}>
        <View style={styles.container}>
            <Text>Current Pixel Ratio is:</Text>
            <Text style={styles.value}>{PixelRatio.get()}</Text>
        </View>
        <View style={styles.container}>
            <Text>Current Font Scale is:</Text>
            <Text style={styles.value}>{PixelRatio.getFontScale()}</Text>
        </View>
        <View style={styles.container}>
            <Text>On this device images with a layout width of</Text>
            <Text style={styles.value}>{size} px</Text>
            <Image source={cat} />
        </View>
        <View style={styles.container}>
            <Text>require images with a pixel width of</Text>
            <Text style={styles.value}>
                {PixelRatio.getPixelSizeForLayoutSize(size)} px
            </Text>
            <Image
                source={cat}
                style={{
                    width: PixelRatio.getPixelSizeForLayoutSize(size),
                    height: PixelRatio.getPixelSizeForLayoutSize(size)
                }}
            />
        </View>
    </ScrollView>
);
const styles = StyleSheet.create({
    scrollContainer: {
        flext: 1,
        marginTop: "2em",
        // justifyContent: "center",
    },
    container: {
        justifyContent: "center",
        alignItems: "center"
    },
    value: {
        fontSize: 24,
        marginBottom: 12,
        marginTop: 4
    }
});
export default App;